@import '@/styles/variables.scss';

.order-list-page {
  min-height: 100vh;
  background-color: $bg-color;
  
  .tabs-header {
    display: flex;
    align-items: center;
    height: 80rpx;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    
    .tab-item {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      position: relative;
      color: $text-color-secondary;
      
      &.active {
        color: $primary-color;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background-color: $primary-color;
          border-radius: 2rpx;
        }
      }
    }
  }
  
  .order-list {
    padding: 20rpx;
    
    .order-item {
      background-color: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      
      .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        border-bottom: 1rpx solid $border-color-light;
        
        .order-number {
          font-size: 26rpx;
          color: $text-color-secondary;
        }
        
        .order-status {
          font-size: 26rpx;
          color: $primary-color;
          font-weight: bold;
        }
      }
      
      .product-list {
        .product-item {
          display: flex;
          padding: 20rpx 30rpx;
          border-bottom: 1rpx solid $border-color-light;
          
          .product-image {
            width: 140rpx;
            height: 140rpx;
            border-radius: 8rpx;
            margin-right: 20rpx;
          }
          
          .product-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            
            .product-name {
              font-size: 28rpx;
              color: $text-color-primary;
              margin-bottom: 10rpx;
              line-height: 1.4;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            
            .product-spec {
              font-size: 26rpx;
              color: $text-color-secondary;
            }
            
            .product-price-info {
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              .price {
                font-size: 28rpx;
                color: $text-color-primary;
                font-weight: bold;
                
                &::before {
                  content: '¥';
                  font-size: 70%;
                  margin-right: 2rpx;
                }
              }
              
              .quantity {
                font-size: 26rpx;
                color: $text-color-secondary;
              }
            }
          }
        }
      }
      
      .order-footer {
        display: flex;
        flex-direction: column;
        padding: 20rpx 30rpx;
        
        .order-total {
          display: flex;
          justify-content: flex-end;
          font-size: 26rpx;
          margin-bottom: 20rpx;
          
          .total-label {
            color: $text-color-secondary;
            margin-right: 10rpx;
          }
          
          .total-count {
            color: $text-color-secondary;
            margin-right: 10rpx;
          }
          
          .total-amount {
            color: $primary-color;
            font-weight: bold;
            
            &::before {
              content: '¥';
              font-size: 70%;
              margin-right: 2rpx;
            }
          }
        }
        
        .order-actions {
          display: flex;
          justify-content: flex-end;
          
          .action-btn {
            height: 60rpx;
            line-height: 60rpx;
            padding: 0 30rpx;
            margin-left: 20rpx;
            font-size: 26rpx;
            border-radius: 30rpx;
            
            &.default {
              background-color: #f5f5f5;
              color: $text-color-secondary;
            }
            
            &.primary {
              background-color: $primary-color;
              color: #fff;
            }
            
            &.plain {
              border: 1rpx solid $primary-color;
              color: $primary-color;
              background-color: #fff;
            }
          }
        }
      }
    }
  }
  
  .empty-order {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 200rpx;
    
    .empty-image {
      width: 240rpx;
      height: 240rpx;
      margin-bottom: 30rpx;
    }
    
    .empty-text {
      font-size: 28rpx;
      color: $text-color-secondary;
      margin-bottom: 40rpx;
    }
    
    .go-shopping {
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 60rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      background-color: $primary-color;
      color: #fff;
    }
  }
  
  .loading-more, .no-more {
    text-align: center;
    padding: 30rpx 0;
    font-size: 26rpx;
    color: $text-color-secondary;
  }
} 